<template>
    <div>
        <el-button type="primary" style="margin-bottom: 20px;">Primary</el-button>
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="date" label="Date" align="center" />
            <el-table-column prop="name" label="Name" align="center" />
            <el-table-column prop="address" label="Address" align="center" />
            <el-table-column label="操作" align="center">
                <el-button type="primary" plain>Primary</el-button>
                <el-button type="primary" plain>Primary</el-button>
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 20px;" v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[100, 200, 300, 400]"
            :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
const currentPage = ref(4)
const pageSize = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

</script>

<style scoped></style>